<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <!--<yshop-info />-->
      <el-row :gutter="32">
        <el-col :xs="16" :sm="16" :lg="8">
          <order-count></order-count>
        </el-col>
        <el-col :xs="16" :sm="16" :lg="8">

          <div class="chart-wrapper">
            <p>本月成交额</p>
            <bar-chart />
          </div>
        </el-col>
        <el-col :xs="16" :sm="16" :lg="8">
          <div class="chart-wrapper">
            <p>本月订单数</p>
            <pie-chart />
          </div>
        </el-col>
      </el-row>
      <el-table ref="multipleTable" v-loading="loading" :data="data" size="small" style="width: 100%;" >
        <el-table-column prop="orderId" width="140" label="订单号">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
            <p>{{ scope.row.pinkName }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="realName" label="用户昵称" >
          <template slot-scope="scope">
            <span>{{ scope.row.user.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cartInfoList" width="300" label="商品信息">
          <template slot-scope="scope">
            <div>
              <div v-for="item,idx in scope.row.productList" :key="item.id">
                {{idx + 1}}. {{ item.storeName }}  * {{ item.num }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="payPrice" label="实际支付" />
        <el-table-column prop="addTime" width="160" label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :total="total"
        :current-page="page + 1"
        style="margin-top: 8px;"
        layout="total, prev, pager, next"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from '../../dashboard/PanelGroup'
import PanelGroupT from '../../dashboard/PanelGroupT'
import PieChart from '../../dashboard/BarChartT'
import BarChart from '../../dashboard/BarChart'
import { count } from '@/api/visits'
import YshopInfo from '../../dashboard/YshopInfo'
import OrderCount from '../../dashboard/OrderCount'
import curdYxStoreOrder from '@/api/yxStoreOrder'
import { parseTime } from '@/utils/index'

/**
   * 记录访问，只有页面刷新或者第一次加载才会记录
   */
count().then(res => {
})

export default {
  name: 'BIll',
  components: {
    PanelGroup,
    PanelGroupT,
    PieChart,
    BarChart,
    YshopInfo,
    OrderCount
  },
  created() {
    this.beforeInit()
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  data() {
    return {
      page: 0,
      size: 10,
      total: 0,
      data: [],
      loading: true
    }
  },
  methods: {
    parseTime,
    beforeInit() {
      // this.url = 'api/yxStoreOrder'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort, orderType: 0, addTime: null }
      // if (type && value) { this.params[type] = value }
      // return true
      curdYxStoreOrder.orderGet(this.params).then(res => {
        this.data = res.content
        this.loading = false
        this.total = res.totalElements
      })
    },
    
    pageChange(val) {
      this.page = val
      this.beforeInit()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
</style>
